<script>

import {recordList} from "../../api/studentsAPI/https";

export default ({
  name: "index",
  data() {
    return {
      totalList: '',
      list: this.$route.query.list,
      // 默认第一个页面
      activeName: 'first',
      //  table表格
      tableData: [],
      reserveInformation: [],
      // 传递参数
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      ids: '',
      dataList: {}
    };
  },
  methods: {
    handleClickTab(tab, event) {
    }
  },
  created() {
    console.log(this.list.stuNum)
    this.ids = this.list.stuNum
    console.log(this.ids)
    recordList(this.ids, this.page).then(res => {
      console.log(res)
      this.totalList = res.total
      console.log(res.total)
      // data  0
      this.reserveInformation = res.rows
      console.log(this.reserveInformation)
    })
    // console.log(this.list)
  },
  mounted() {

  }
})
</script>

<template>
  <div>
    <div style="margin: 40px ">
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="学生信息" name="first">
          <el-descriptions title="学生信息" :column="3" border>
            <el-descriptions-item label="姓名" label-class-name="my-label" content-class-name="my-content">
              {{ list.name }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄"> {{ list.collegeId }}</el-descriptions-item>
            <el-descriptions-item label="性别"> {{ list.gender }}</el-descriptions-item>

            <el-descriptions-item label="学历">{{ list.education }}</el-descriptions-item>
            <el-descriptions-item label="班级"> {{ list.college }}</el-descriptions-item>
            <el-descriptions-item label="学号"> {{ list.stuNum }}</el-descriptions-item>

            <el-descriptions-item label="手机号"> {{ list.phoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="入学时间"> {{ list.enrollmentTime }}</el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>

            <el-descriptions-item label="心理普测结果"> {{ list.familyInfo }}</el-descriptions-item>
            <el-descriptions-item label="既往病史"> {{ list.anamnesis }}</el-descriptions-item>
            <el-descriptions-item label="心理诊断经历"> {{ list.experience }}</el-descriptions-item>
            <el-descriptions-item label="服药情况"> {{ list.medicationSituation }}</el-descriptions-item>
            <el-descriptions-item label="家庭情况"> {{ list.psychometricTest }}</el-descriptions-item>
            <el-descriptions-item label="其他"> {{ list.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="预约信息" name="second">
          <!-- 无信息时候-->
          <div v-if="this.totalList ==='0'">
            <el-empty description="暂无预约信息"></el-empty>
          </div>
          <!--          有信息时-->
          <div v-else v-for="(item) in reserveInformation"
               :key="reserveInformation.studentId">
            <el-descriptions title="预约信息">
              <el-descriptions-item label="心理咨询师">{{ item.psyTeacher.name }}</el-descriptions-item>
              <el-descriptions-item label="咨询方式">{{ item.mode }}</el-descriptions-item>
              <el-descriptions-item label="咨询时间">{{ item.createTime }}</el-descriptions-item>
              <el-descriptions-item label="咨询内容">{{ item.psyTeacher.profession }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测评记录" name="third">
          <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="测试名称"
              width="280">
            </el-table-column>
            <el-table-column
              prop="address"
              label="分数"
              width="280"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="测评结构">
            </el-table-column>
            <el-table-column
              prop="address"
              label="测评时间"
              width="280">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .th.el-table__cell.is-leaf {
  text-align: center;
}

::v-deep .el-descriptions__header {
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  background-color: rgb(250, 250, 250);
  border: 1px solid #e6ebf5;
  margin-bottom: 0px;
}

::v-deep .el-descriptions__body {
  border: 1px solid #e6ebf5;

}

::v-deep .el-descriptions__table {
  margin: 10px 5px;
  font-size: 14px;
  font-weight: bold;
}

</style>
